<template>
  <div>
    <p class="refreshText"></p>
    <ul>
      <!-- <li v-for="(item, index) in tableData" :key="index" @click="getList(item)">
             <div class="tableData">{{ item.article_id }}</div>
      <div class="tableData">{{ item.article_title }}</div>
      <div class="tableData">{{ item.article_content }}</div>
        </li> -->
      <li class="table">
        <div class="tableData">文章id</div>
        <div class="tableData">文章标题</div>
        <div class="tableData">文章内容</div>
      </li>
      <li
        class="table"
        @click="getList(item)"
        v-for="(item, index) in Data"
        :key="index"
      >
        <div class="tableData">{{ item.article_id }}</div>
        <div class="tableData">{{ item.article_title }}</div>
        <div class="tableData">{{ item.article_content }}</div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { articleQuery } from "../api/index";
import { ref } from "vue";
let tableData = ref([]); //表格数据
const pageSize = "10"; //文章条数

const Data = [
  { article_id: 1, article_title: "1", article_content: "1" },
  { article_id: 11, article_title: "11", article_content: "11" },
  { article_id: 111, article_title: "111", article_content: "111" },
  { article_id: 1111, article_title: "1111", article_content: "1111" },
  { article_id: 11111, article_title: "11111", article_content: "11111" },
  { article_id: 111111, article_title: "111111", article_content: "111111" },
  { article_id: 1111111, article_title: "1111111", article_content: "1111111" },
  { article_id: 11111111, article_title: "11111111", article_content: "11111111" },
  { article_id: 111111111, article_title: "111111111", article_content: "111111111" },
  { article_id: 1111111111, article_title: "1111111111", article_content: "1111111111" },
  { article_id: 11111111111, article_title: "11111111111", article_content: "11111111111" },
  { article_id: 111111111111, article_title: "111111111111", article_content: "111111111111" },
  { article_id: 1111111111111, article_title: "1111111111111", article_content: "1111111111111" },
  { article_id: 2, article_title: "2", article_content: "2" },
  { article_id: 22, article_title: "22", article_content: "22" },
  { article_id: 222, article_title: "222", article_content: "222" },
  { article_id: 2222, article_title: "2222", article_content: "2222" },
  { article_id: 22222, article_title: "22222", article_content: "22222" },
  { article_id: 222222, article_title: "222222", article_content: "222222" },
  { article_id: 2222222, article_title: "2222222", article_content: "2222222" },
  { article_id: 22222222, article_title: "22222222", article_content: "22222222" },
  { article_id: 222222222, article_title: "222222222", article_content: "222222222" },
  { article_id: 2222222222, article_title: "2222222222", article_content: "2222222222" },
  { article_id: 22222222222, article_title: "22222222222", article_content: "22222222222" },
  { article_id: 222222222222, article_title: "222222222222", article_content: "222222222222" },
  { article_id: 2222222222222, article_title: "2222222222222", article_content: "2222222222222" },
  { article_id: 3, article_title: "3", article_content: "3" },
  { article_id: 4, article_title: "4", article_content: "4" },
  { article_id: 5, article_title: "5", article_content: "5" },
  { article_id: 5, article_title: "2", article_content: "2" },
  { article_id: 5, article_title: "2", article_content: "2" },
  { article_id: 5, article_title: "2", article_content: "2" },
  { article_id: 5, article_title: "2", article_content: "2" },
  { article_id: 5, article_title: "2", article_content: "2" },
  { article_id: 5, article_title: "2", article_content: "2" },
            
];

//查询文章信息
const getList = (pageNo) => {
  articleQuery({
    pageNo,
    pageSize,
  }).then((res) => {
    console.log(res);
    // tableData.value = res?.data?.list || [];
    const { list = [] } = res?.data || {};
    tableData.value = list;
  });
};
</script>

<style scoped>
.table {
  display: flex;
  height: 100%;
}

li {
  list-style: none;
  margin: 10px;
}

.tableData {
  flex: 1;
}
</style>
